<template>
    <div class="multistage flex-container">
        <div>
            <h3>选择地址<a @click="cancel">取消</a></h3>
            <div class="aDhead">
                <ul class="clearfix" style="width: 60rem;">
                    <li v-for="item in titleList" :class="{active: item[name] == '请选择' || item[name] == titleActive}" @click="selectTitleList(item)">{{item[name]}}</li>
                </ul>
            </div>
            <div class="adList">
                <ul>
                    <li v-for="item in cotList.child" :class="{active: item[name] == titleActive}" @click="selectCotList(item)">{{item[name]}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "multistage",
        props:['dataList' , 'name'],
        data(){
            return {
                titleActive: '',
                titleList:[{[this.name]: '请选择'}],  //头部列表
                cotList: {}    //内容列表
            }
        },
        mounted(){
            this.cotList = { child: this.dataList };
        },
        methods:{
            /*
            * 选择地址列表
            * */
            selectCotList(item){
                this.titleActive = '';
                this.titleList.splice(item.level);
                if(!item.child){
                    this.titleList.splice(-1 , 1 , item);
                    this.titleActive = item[this.name];
                    this.$emit('selectedBack' , this.titleList);
                    return;
                }
                this.titleList.splice(-1 , 0 , item);
                let newItem = item;
                if(item[this.name] == '请选择') newItem = { child: this.dataList };
                this.cotList = newItem;
            },
            /*
            * 重新选择
            * */
            selectTitleList(item){
                if(item[this.name] == '请选择') return;
                this.titleList.splice(item.level);
                this.titleActive = item[this.name];
                if(!item.child) return;
                let newItem = this.titleList[item.level - 2];
                if(!newItem || newItem[this.name] == '请选择') newItem = { child: this.dataList };
                this.cotList = newItem;
                this.titleList.splice(-1 , 1 , {[this.name]: '请选择'});
            },
            cancel(){
                this.$emit('selectedBack' , this.titleList , true);
            }
        }
    }
</script>

<style>
    .multistage{position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 9999;background: rgba(0,0,0,0.4);align-items: flex-end;}
    .multistage > div{background: #fff;width: 100%;flex: none;}
    .multistage h3{height: 2.2rem;line-height: 2.2rem;background: #f1f1f1;padding: 0 0.75rem;}
    .multistage h3 a{float: right;display: inline-block;width: 3rem;text-align: center;color: #00acfd;}
    .multistage .aDhead{height: 2.2rem;line-height: 2.2rem;width: 100%;overflow-x: auto;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;}
    .multistage .aDhead li{float: left;padding: 0 0.75rem;}
    .multistage li.active{color: #00acfd;}
    .multistage .aDhead{border-bottom: 1px solid #f1f1f1;}
    .multistage .adList{height: 12rem;padding: 0 0.75rem;line-height: 2rem;overflow-y: auto;overflow-scrolling: touch;-webkit-overflow-scrolling: touch;}
</style>
